<!--
- Author:  LiShibin.
- Date:    2017/7/15 0015.
- File:    返回的悬浮导航按钮.
-->
<template>
  <div class="back-nav" v-show="show">
    <div class="back-nav-content">
      <i class="iconfont icon-back" @click="back"></i>
    </div>
  </div>
</template>

<script>
  export default{
    beforeRouteEnter (to, from, next) {
      next(vm => {
        vm.from = from.name
      })
    },
    data() {
      return {
        from: null
      }
    },
    props: {
      to: {
        type: Object,
        default: function () {
          return null
        }
      },
      show: {
        type: Boolean,
        default: function () {
          return true
        }
      }
    },
    created() {
    },
    mounted() {
      console.log('from', this.from)
//      var dragDom = document.querySelectorAll('.back-nav')[0]
//      var draggie = new Draggabilly(dragDom) // eslint-disable-line
//      draggie.enable()
    },
    methods: {
      back() {
        if (this.to) {
          this.$router.push(this.to)
        } else {
          this.$router.go(-1)
        }
      }
    }
  }
</script>

<style lang="less">
  .back-nav {
    position: fixed;
    right: 0;
    bottom: 13%;
    width: 2rem;
    &-content {
      float: left;
      width: 2rem;
      height: 2rem;
      line-height: 2rem;
      text-align: center;
      color: rgba(255, 255, 255, .6);
      border-radius: 0.125rem 0 0 0.125rem;
      background: rgba(0, 0, 0, .6);
      margin-top: 0.5rem;
    }
    &-content .iconfont {
      font-size: 1.4rem;
    }
  }
</style>